<!--项目清单列表-->
<template>
  <div class="page-wrap">
    <PiTable
      rowKey="projectShortName"
      :loading
      :tableData
      :tableColumns
      :settingColumns
      :pagination="page"
      @pageChange="pageChange"
      @confirmSetting="getData"
    >
      <template #projectShortName="{ row }">
        <el-link
          type="primary"
          v-jump.open="[
            'projectDetail',
            { oid: row.oid, title: `${row.projectShortName}，${row.projectName}` },
          ]"
        >
          {{ row.projectShortName }}
        </el-link>
      </template>
    </PiTable>
  </div>
</template>

<script setup>
const loading = ref(false);
const tableData = ref([]);
const tableColumns = ref([]);
const { projectListApi } = window.$api;
const page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页数
  total: 0, //数据总量
});
const param = {
  tableID: 'ProjectTable',
  softType: 'com.pisx.pmgt.project.PIProject',
};
const settingColumns = {
  getColumns: projectListApi.setProjectTableColumns, //获取表头接口
  getColumnsParams: param, //接口入参
  setColumns: projectListApi.saveProjectTableColumns, //保存设置的表头接口
  setColumnsParams: param, //接口入参
};

onMounted(() => {
  getData();
});

/**
 * 获取表格数据
 * */
const getData = () => {
  loading.value = true;
  const params = {
    ...param,
    page: page.pageNum,
    range: page.pageSize,
  };

  projectListApi
    .getProjectTableInfo(params)
    .then((res) => {
      tableColumns.value = res.data.columns.map((item) => ({
        ...item,
        sortable: true,
      }));
      tableData.value = res.data.rows;
      page.total = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
/**
 * 分页
 * @pageNum {number} 当前页码
 * @pageSize {number} 每页显示数
 * */
const pageChange = (pageNum, pageSize) => {
  page.pageNum = pageNum;
  page.pageSize = pageSize;
  getData();
};
</script>

<style scoped lang="less">
.page-wrap {
  display: flex;
}
</style>
